/*
 * @Descripttion : 动画
 * @Author       : foxui team
 * @Date         : 2021-09-10 09:27:40
 * @LastEditors  : QianFox Team
 * @LastEditTime : 2022-06-01 10:16:11
 */

:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1s;
    --animate-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

@mixin foxui-animate__init {
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/**
 * @description: 生成动画 class (foxui-animate-XXXX)
 * @param {*}
 * @return {*}
 * @Date: 2021-09-10 14:16:41
 */
@mixin foxuiAnimate($animationName) {
    .foxui-animate-#{$animationName} {
        @include foxui-animate__init;
        -webkit-animation-name: $animationName;
        animation-name: $animationName;
        @content;
    }
}

/* 动画 class
    slideOutUp:               向上滑出
    fadeInDown:               向下滑入
    fadeIn:                   渐入
    fadeOut：                 渐出
-------------------------- */
@include foxuiAnimate(slideOutUp);
@include foxuiAnimate(fadeInDown);
@include foxuiAnimate(slideOutUpSort);
@include foxuiAnimate(fadeInDownSort);
@include foxuiAnimate(fadeIn);
@include foxuiAnimate(fadeOut);

/**
 * @description: 生成动画
 * @param {*}
 * @return {*}
 * @Date: 2021-09-10 14:15:12
 */
@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

/* slideOutUp 向上滑出
-------------------------- */
@include keyframes(slideOutUp) {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -25%, 0);
        transform: translate3d(0, -25%, 0);
    }
}

/* fadeInDown 向下滑入
-------------------------- */
@include keyframes(fadeInDown) {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -25%, 0);
        transform: translate3d(0, -25%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* slideOutUpSort 向上滑出 (短距离)
-------------------------- */
@include keyframes(slideOutUpSort) {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -5%, 0);
        transform: translate3d(0, -5%, 0);
    }
}

/* fadeInDownSort 向下滑入 (短距离)
-------------------------- */
@include keyframes(fadeInDownSort) {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -5%, 0);
        transform: translate3d(0, -5%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* fadeIn 渐入
-------------------------- */
@include keyframes(fadeIn) {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* fadeOut 渐出
-------------------------- */
@include keyframes(fadeOut) {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
